<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', path='./styles.css') }}">
    <title>Регион</title>
</head>
<body>
    {% include 'header.html' %}

    <main>
        <section class="region-card">
            <h2>Информация о регионе</h2>
            <div>
                <p><strong>ID:</strong> <span id="regionId"></span></p>
                <p><strong>Имя:</strong> <span id="regionName"></span></p>
                <p><strong>Родительский регион:</strong> <a href="#" id="regionParent"></a></p>
                <p><strong>Тип региона:</strong> <a href="/region-types" id="regionType"></a></p>
                <p><strong>Широта:</strong> <span id="latitude"></span></p>
                <p><strong>Долгота:</strong> <span id="longitude"></span></p>
            </div>
        </section>

        <div id="message" class="message"></div>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', async function() {
            const params = new URLSearchParams(window.location.search);
            const regionId = params.get('id');

            if (!regionId) {
                showMessage('Не указан ID региона', 'error');
                return;
            }

            try {
                const response = await fetch(`/region/${regionId}`);
                if (response.ok) {
                    const region = await response.json();
                    document.getElementById('regionId').textContent = region.id;
                    document.getElementById('regionName').textContent = region.name;
                    document.getElementById('regionParent').textContent = region.parentRegion;
                    document.getElementById('regionParent').href = `/region?id=${region.parentRegion}`;
                    document.getElementById('regionType').textContent = region.regionType;
                    document.getElementById('latitude').textContent = region.latitude;
                    document.getElementById('longitude').textContent = region.longitude;
                } else {
                    showMessage('Ошибка загрузки данных региона', 'error');
                }
            } catch (error) {
                showMessage('Ошибка загрузки данных региона: ' + error.message, 'error');
            }
        });

        function showMessage(message, type) {
            const messageDiv = document.getElementById('message');
            messageDiv.textContent = message;
            messageDiv.className = `message ${type}`;
            messageDiv.style.display = 'block';
            setTimeout(() => {
                messageDiv.style.display = 'none';
            }, 5000);
        }
    </script>
</body>
</html>